<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ESP32 Web Dashboard</title> 
    <link rel="stylesheet" href="style.css" />
</head>

<body>

    <!-- 左侧导航栏 -->
    <nav class="sidebar">
        <header class="sidebar__header">
            <a href="#" class="sidebar__logo" data-page="status">
                <img id="logo-img" alt="Logo" src="logo.png" />
            </a>
        </header>

        <div class="sidebar__body">
            <ul class="menu">
                <li class="menu__item">
                    <a href="#" class="menu__link active" data-page="status">
                        <span class="menu__icon">📊</span>
                        <span class="menu__text">设备状态</span>
                    </a>
                </li>
                <li class="menu__item">
                    <a href="#" class="menu__link" data-page="control">
                        <span class="menu__icon">🎛️</span>
                        <span class="menu__text">设备控制</span>
                    </a>
                </li>
                <li class="menu__item">
                    <a href="#" class="menu__link" data-page="network">
                        <span class="menu__icon">⚙️</span>
                        <span class="menu__text">网络配置</span>
                    </a>
                </li>
                <li class="menu__item">
                    <a href="#" class="menu__link" data-page="services">
                        <span class="menu__icon">🖥️</span>
                        <span class="menu__text">服务配置</span>
                    </a>
                </li>
                <li class="menu__item">
                    <a href="#" class="menu__link" data-page="maintenance">
                        <span class="menu__icon">🔧</span>
                        <span class="menu__text">运维管理</span>
                    </a>
                </li>
            </ul>
        </div>

        <footer class="sidebar__footer">
            <span>固件版本: </span><span id="firmware-version">---</span>
        </footer>
    </nav>

    <!-- 右侧主内容区 -->
    <main class="main-content">
        <header class="main-header">
            <!-- 左侧：上下文信息 -->
            <div class="header-left">
                <span id="device-hostname" class="device-name">ESP32-Dashboard</span>
            </div>

            <div id="header-message" class="header-message"></div>

            <!-- 右侧：用户操作和通知 -->
            <div class="header-right">
                <!-- 通知中心 -->
                <div id="notification-center" class="notification-bell" title="通知">
                    <span id="notification-icon">🔔</span>
                    <!-- 角标，有新通知时显示 -->
                    <span id="notification-badge" class="badge"></span>
                    <!-- 下拉通知列表 (默认隐藏) -->
                    <div id="notification-list" class="notification-dropdown">
                        <!-- JS会在这里动态填充通知 -->
                        <div class="notification-item">还没有任何通知</div>
                    </div>
                </div>
                
                <!-- 用户信息 -->
                <div class="user-info">
                    <span>欢迎, </span><span id="username">admin</span>
                </div>

                <!-- 登出按钮 -->
                <a href="#" id="logout-btn" class="logout-button" title="登出">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
                </a>
            </div>
        </header>

        <!-- 动态内容容器 -->
        <div id="page-content" class="main-body">
            <!-- 页面内容会加载到这里 -->
        </div>
    </main>

    <!-- 脚本文件在 body 结束前引入 -->
    <script src="main.js"></script>
</body>

</html>